<template>
    <scroll-view
        class="page"
        :scroll-y="true"
        :style="{
            height: 'calc(100vh)',
        }"
    >
        <view class="navbar">
            <navbar title="可用优惠券"></navbar>
        </view>
        <u-radio-group v-model="coupon_id" placement="column">
            <view
                class="coupon"
                v-for="(coupon, key) in coupons"
                :key="key"
                @click="selectCoupon(coupon.id)"
            >
                <view class="top">
                    <view class="left">
                        <image
                            style="height: 100rpx; width: 140rpx"
                            src="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/coupon_bg.png"
                            mode="scaleToFill"
                        />
                        <view class="icon-text">{{ coupon.icon_text }}</view>
                    </view>
                    <view class="right">
                        <view class="title">{{ coupon.title }}</view>
                        <view class="radio">
                            <u-radio
                                :name="coupon.id"
                                activeColor="#f9ae3d"
                                size="50"
                                labelSize="40"
                                iconSize="32"
                            >
                            </u-radio>
                        </view>
                      <view class="bottom">
                        有效日期：{{ coupon.effective_date_begin }} ~
                        {{ coupon.effective_date_end }}
                      </view>
                    </view>
                </view>
            </view>
        </u-radio-group>
        <view class="empty-box"></view>
        <view class="submit" @click="submitCoupon">
            <u-button text="确认" color="#f9ae3d" size="large"></u-button>
        </view>
    </scroll-view>
</template>
<script>
export default {
    data() {
        return {
            coupons: [
                {
                    id: 1,
                    title: "10元代金券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "10元",
                },
                {
                    id: 2,
                    title: "85折券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "券",
                },
                {
                    id: 3,
                    title: "85折券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "券",
                },
                {
                    id: 4,
                    title: "85折券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "券",
                },
                {
                    id: 5,
                    title: "85折券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "券",
                },
                {
                    id: 6,
                    title: "85折券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "券",
                },
                {
                    id: 7,
                    title: "85折券",
                    effective_date_begin: "2018-05-01",
                    effective_date_end: "2018-05-31",
                    icon_text: "券",
                },
            ],
        };
    },
    computed: {
        coupon_id: {
            get() {
                return this.$store.state.ordering.coupon_id;
            },
            set(val) {
                this.$store.commit("ordering/set", {
                    coupon_id: val,
                });
            },
        },
    },
    methods: {
        selectCoupon(id) {
            if (id != this.coupon_id) {
                this.$store.commit("ordering/set", {
                    coupon_id: id,
                });
            }
        },
        submitCoupon() {
            let currentCoupon = {};
            for (let key in this.coupons) {
                if (this.coupons[key].id == this.coupon_id) {
                    currentCoupon = this.coupons[key];
                }
            }
            this.$store.commit("cart/setCoupons", currentCoupon);

            uni.navigateBack({ delta: 1});
        },
    },
};
</script>
<style lang="scss">
.empty-box {
    height: 130rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.submit {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 100rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #f9ae3d;
}

.page {
    background-color: #efeff4;
}

.coupon {
    margin: 30rpx 30rpx 0 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .top {
        height: 140rpx;
        display: flex;
      flex-direction: row;
        justify-content: center;
      padding: 20rpx 0;
        .left {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20rpx 60rpx 40rpx;
            //margin-top: 20rpx;
            .icon-text {
                margin-left: -140rpx;
                width: 140rpx;
                text-align: center;
                color: #f9ae3d;
                font-weight: 600;
                font-size: 36rpx;
            }
        }
        .right {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
          flex-direction: column;
          position: relative;
            .title {
                width: 80%;
                //height: 100%;
                //align-items: flex-start;
                padding-top: 20rpx;
                font-size: 36rpx;
                //margin-top: 20rpx;
            }
            .radio {
              position: absolute;
              right: 20rpx;
              top: 40rpx;
                //height: 100%;
                //display: flex;
                //align-items: flex-end;
                //padding-bottom: 20rpx;
            }
          .bottom {
            //margin: 20rpx 40rpx 20rpx 0;
            //text-align: right;
            font-size: 26rpx;
          }
        }
    }
}
</style>
